<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>预测</title>
	<link rel="stylesheet" href="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/css/bootstrap/bootstrap.min.css'; ?>">
</head>
<body>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-2">
			<div class="panel panel-default">
			  <div class="panel-heading">
			    <h3 class="panel-title">帮助</h3>
			  </div>
			  <div class="panel-body">
			  	  <p class="text-primary">各个技能对应的编号:</p>
				  <ul>
				  	<li><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/1.png'; ?>" alt=""> <span>1</span> </li>
				  	<li><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/2.png'; ?>" alt=""> <span>2</span> </li>
				  	<li><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/3.png'; ?>" alt=""> <span>3</span> </li>
				  	<li><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/4.png'; ?>" alt=""> <span>4</span> </li>
				  	<li><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/5.png'; ?>" alt=""> <span>5</span> </li>
				  	<li><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/a.png'; ?>" alt=""> <span>A</span> </li>
				  	<li><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/b.png'; ?>" alt=""> <span>B</span> </li>
				  	<li><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/c.png'; ?>" alt=""> <span>C</span> </li>
				  </ul> 
			  </div>
			</div>
		</div>
		<div class="col-md-5">
			<div class="panel panel-default">
			  <div class="panel-heading">
			    <h3 class="panel-title">预测</h3>
			  </div>
			  <div class="panel-body">
			 	<form id="form" @submit.prevent="submit">
				  <div class="form-group">
				    <label for="exampleInputEmail1">马1</label>
				    <div class="row">
				    	<div class="col-md-6"><status v-on:input="input" count="p1"></status></div>	
				    	<div class="col-md-6"><skill v-on:input="input" count="p1"></skill></div>	
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="exampleInputEmail1">马2</label>
				    <div class="row">
				    	<div class="col-md-6"><status v-on:input="input" count="p2"></status></div>	
				    	<div class="col-md-6"><skill v-on:input="input" count="p2"></skill></div>	
				    </div>
				  </div>
				  <div class="form-group" v-show="ret">
				  	<div class="alert alert-warning alert-dismissible" role="alert">
					  <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
					  <strong>提示</strong> {{ret}}
					</div>
				  </div>
				  <button type="submit" class="btn btn-default">计算</button>
				</form>   
			  </div>
			</div>
		</div>
		<div class="col-md-5">
			<div class="panel panel-default">
			  <div class="panel-heading">
			    <h3 class="panel-title">统计数据</h3>
			  </div>
			  <div class="panel-body">
			 	<form id="form2" @submit.prevent="submit">
				  <div class="form-group">
				    <label for="exampleInputEmail1">马1</label>
				    <div class="row">
				    	<div class="col-md-6"><status v-on:input="input" :key="1" count="p1"></status></div>	
				    	<div class="col-md-6"><skill v-on:input="input" :key="1" count="p1"></skill></div>	
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="exampleInputEmail1">马2</label>
				    <div class="row">
				    	<div class="col-md-6"><status v-on:input="input" :key="2" count="p2"></status></div>	
				    	<div class="col-md-6"><skill v-on:input="input" :key="2" count="p2"></skill></div>	
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="exampleInputEmail1">胜利</label>
				    <input type="radio" aria-label="..." name="ra" value="p1" v-model="subData.win">1
				    <input type="radio" aria-label="..." name="ra" value="p2" v-model="subData.win">2
				  </div>
				  <div class="form-group" v-show="ret">
				  	<div class="alert alert-warning alert-dismissible" role="alert">
					  <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
					  <strong>提示</strong> {{ret}}
					</div>
				  </div>
				  <button type="submit" class="btn btn-default">提交</button>
				</form>   
			  </div>
			</div>
		</div>
	</div>
</div>

</body>
<script src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/js/jquery-1.10.2.min.js'; ?>"></script>
<script src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/js/bootstrap.min.js'; ?>"></script>
<script src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/js/vue.js'; ?>"></script>

<script type="text/x-template" id="status">
  <div class="input-group">
    <input type="text" class="form-control" aria-label="..." disabled="disabled" :value="val">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">状态<span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li @click="setVal(1)"><a href="javascript:void(0);"><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/1.png'; ?>" alt=""></a></li>
        <li @click="setVal(2)"><a href="javascript:void(0);"><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/2.png'; ?>" alt=""></a></li>
        <li @click="setVal(3)"><a href="javascript:void(0);"><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/3.png'; ?>" alt=""></a></li>
        <li @click="setVal(4)"><a href="javascript:void(0);"><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/4.png'; ?>" alt=""></a></li>
        <li @click="setVal(5)"><a href="javascript:void(0);"><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/5.png'; ?>" alt=""></a></li>
      </ul>
    </div><!-- /btn-group -->
  </div><!-- /input-group -->
</script>

<script type="text/x-template" id="skill">
	<div class="input-group">
    <input type="text" class="form-control" disabled="disabled" :value="val">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">技能<span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li @click="setVal('A')"><a href="javascript:void(0);"><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/a.png'; ?>" alt=""></a></li>
        <li @click="setVal('B')"><a href="javascript:void(0);"><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/b.png'; ?>" alt=""></a></li>
        <li @click="setVal('C')"><a href="javascript:void(0);"><img class="img-circle" src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/images/c.png'; ?>" alt=""></a></li>
      </ul>
    </div><!-- /btn-group -->
  </div><!-- /input-group --> 
</script>
<script>
	//公共变量
	var APP_URL_ROOT="<?php echo APP_URL_ROOT; ?>";
</script>
<script src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/js/component.js'; ?>"></script>
<script src="<?php echo APP_HTTP_ROOT.'/'.$this->GetThemes().'/js/main.js'; ?>"></script>
</html>